<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>原始表单注册</title>

</head>

<body>
  <!-- 
      action就是ajax的url，method就是ajax中method
      表单元素的name就是后端参数名称
      和ajax请求的区别，ajax的请求返回值是js处理，
      不会刷新和跳转页面
      原始表单提交会跳转页面到action地址
      除了get提交的数据，例如post的数据都需要后端技术处理
  -->
  <form id="myform" action="https://huhuiyu.top/teach-service/user/reg" method="post">
    <input type="text" name="tbAdmin.username" placeholder="姓名" />
    <input type="text" id="txtPwd" name="tbAdmin.password" placeholder="密码" />
    <input type="text" name="tbAdmin.nickname" placeholder="昵称" />
    <input type="submit">
    <button id="btnSubmit">手动触发提交</button>
  </form>

  <form action="formdata.html" method="get">
    <input type="text" name="tbAdmin.username">
    <input type="submit">
  </form>
  <!-- get提交的效果和超链接是一样的 -->
  <a href="http://127.0.0.1:5500/public/formdata.html?tbAdmin.username=dfdasf">
    get提交超链接效果
  </a>
  <button id="btnLocation">js触发超链接模式的get提交</button>
  <script>
    document.getElementById('btnLocation')
      .addEventListener('click',function(){
        location='http://127.0.0.1:5500/public/formdata.html?tbAdmin.username=dfdasf'
    });
  </script>

  <iframe src="https://huhuiyu.top" frameborder="0"></iframe>

  <script src="https://cdn.bootcdn.net/ajax/libs/spark-md5/3.0.0/spark-md5.min.js"></script>
  <script>
    let myform = document.getElementById('myform')
    let btnSubmit = document.getElementById('btnSubmit')
    let txtPwd = document.getElementById('txtPwd')
    btnSubmit.addEventListener('click', function () {
      txtPwd.value = SparkMD5.hash(txtPwd.value)
      myform.submit()
    });

  </script>

</body>

</html>